<template>
  <el-dialog
    class="close-dialog"
    :title="dialog.title"
    width="900px"
    :visible.sync="dialog.visible"
  >
    <div class="main">
      <div class="type2-title margin-t0">案件基本信息</div>
      <div class="row">
        <devformVue label="案件名称 " classname="w2">
          {{ showData.caseName }}
        </devformVue>
        <devformVue label="案件编号" classname="w2">
          {{ showData.caseNo }}
        </devformVue>
      </div>
      <div class="row">
        <devformVue label="收案时间" classname="w2">
          {{ showData.receiptDate }}
        </devformVue>
        <devformVue label="案件类型 " classname="w2">
          {{ showData.categoryName }}
        </devformVue>
      </div>
      <div class="row">
        <devformVue label="客户" classname="w2">
          {{ showData.customerName }}
        </devformVue>
        <devformVue label="合同金额(元) " classname="w2">
          {{ showData.fixedCosts }}
        </devformVue>
      </div>
      <div class="row">
        <!-- <devformVue label="委托人" classname="w2">
          {{ showData.agent }}
        </devformVue> -->
        <devformVue label="对方当事人" classname="w2">
          {{ showData.targetPartyName }}
        </devformVue>
      </div>
      <div class="row">
        <devformVue label="受理机构"> {{ showData.acceptOrgName }} </devformVue>
      </div>
      <el-form
        label-width="160px"
        :model="formline"
        class="dev-form"
        :rules="rules"
        ref="formline"
      >
        <el-form-item label="结案方式" class="w2" prop="resolveType" inline>
          <el-select v-model="formline.resolveType" placeholder="请选择">
            <el-option
              v-for="item in dict.type.resolve_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="结案时间"
          class="w2 float-r"
          prop="resolveDate"
          inline
        >
          <el-date-picker
            v-model="formline.resolveDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="formline.resolveType == 3 ? '销案原因' : '备注'"
          prop="resolveRemark"
        >
          <el-input
            v-model="formline.resolveRemark"
            class="w300"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传附件" prop="attachments">
          <el-upload
            drag
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-success="successubjectAttachments"
            :headers="headers"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
           
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="foot">
      <el-button @click="submit" type="primary">确定</el-button>
      <el-button @click="cancle">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import devformVue from "./devform.vue";
import { getToken } from "@/utils/auth";
import { resolvecase } from "@/api/case/case";
export default {
  components: { devformVue },
  dicts: ["resolve_type"],
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      dialog: {
        visible: false,
        title: "财务信息(结案) ",
      },
      formline: {
        resolveRemark: "",
        resolveDate: "",
        resolveType: "",
        caseId: "",
        attachments: [],
      },
      showData: {},
      rules: {
        resolveType: [
          { required: true, message: "请选择结案方式", trigger: "change" },
        ],
        resolveDate: [
          { required: true, message: "请选择结案日期", trigger: "change" },
        ],
      },
      options2: [],
    };
  },
  methods: {
    //打开弹窗
    async open(row) {
      this.showData = { ...row };
      console.log(row, "---------------");
      this.dialog.title = row.caseName + "-财务信息(结案)";
      Object.assign(this.$data.formline, this.$options.data().formline);
      this.formline.caseId = row.id;
      this.dialog.visible = true;
    },
    //确定
    submit() {
      this.$refs.formline.validate((valid) => {
        if (valid) {
          console.log("提交成功");
          resolvecase(this.formline).then((res) => {
            this.$message.success("操作成功！");
            this.$emit("submit");
            this.cancle();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    successubjectAttachments(response, file, fileList) {
      //标的额证明文件
      console.log("上传成功", response, file, fileList);
      this.formline.attachments.push({
        filename: file.name,
        size: file.size,
        remark: "",
        url: response.url,
        mimeType: file.name.split(".")[1],
      });
    },
    cancle() {
      this.$refs.formline.resetFields();
      this.dialog.visible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.close-dialog {
  display: flex;
  flex-direction: column;
  .foot {
    text-align: center;
    margin-top: 20px;
  }
  .row {
    display: flex;
  }
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .dev-form .el-form-item__error {
  bottom: 1px;
  top: auto;
  left: 10px;
}
::v-deep .dev-form .el-form-item__content {
  padding-bottom: 13px;
}
</style>
